﻿<!DOCTYPE html>
<hml lang="en">
<head>
 <meta charset="utf-8">
 <title>Getting Familiar with CSS3 Transition</title>
 <link rel="stylesheet" href="css/ccs3flip.css">
</head>
<body>
<header>
 <h1>Getting Familiar with CSS3 Transition</h1>
</header>
<section id="game">
 <div id="cards">
  <div class="card">
   <div class="face front"></div>
   <div class="face back cardAK"></div>
  </div>
  <div class="card">
   <div class="face front"></div>
   <div class="face back cardAQ"></div>
  </div>
 </div>
</section>
<footer>
 <p>This is an example of transitioning cards.</p>
</footer>
<script src="../js/jquery-1.8.2.min.js"></script>
<script>
$(function(){
$("#cards").children().each(function(index){
$(this).click(function(){
$(this).toggleClass("card-flipped");
});
});
});
</script>
</body>
</html>